<template>
  <div class="record-container">
    <div class="main">
      <div class="item" v-for="item in dataArr" :key="item.path" @click="Jump(item.path)">
        <Box :colorArr="colorArr">
          <div class="icon">
            <Icon :type="item.iconType"></Icon>
          </div>
          <p class="text">{{ item.text }}</p>
        </Box>
      </div>
    </div>
    <div class="mask">
      <MongokuanLayer :isMongokuanLayer="isMongokuanLayerRef" @click="close">
        <Record :obtainWho="obtainWhoRef" :PersonalRecordsData="PersonalRecordsDataRef[0]"></Record>
      </MongokuanLayer>
    </div>
  </div>
</template>

<script setup>
import Box from "@/components/Box/index.vue"
import Icon from "@/components/Icon/index.vue";
import MongokuanLayer from "@/components/MongokuanLayer/index.vue";
import Record from "./components/Record.vue"
import {ref} from "vue"
import { useRouter } from "vue-router";
const router = useRouter();
const isMongokuanLayerRef = ref(false) // 是否开启蒙层
const obtainWhoRef = ref(null); // 需要获取谁的数据
const colorArr = ["#7817e7", "#ba3ae2"];
// 个人记录页面渲染静态页面需要的全部数据
const PersonalRecordsData = [
  {
    id: 1,
    text: "按时起床打卡率"
  },
  {
    id:2,
    text:"按时归宿打卡率",
  },{
    id: 3,
    text: "打扫率"
  }
]
// 筛选出需要渲染的静态数据
const PersonalRecordsDataRef = ref(null)
// 记录目录的数据
const dataArr = [
{
    iconType: "rightarrow",
    text: "放回",
    path: -1,
  },
  {
    iconType: "getUp",
    text: "起床记录",
    path: 1
  },
  {
    iconType: "endResult",
    text: "归宿记录",
    path: 2,
  },
  {
    iconType: "clean",
    text: "打扫记录",
    path: 3,
  },
]
// 关闭目录
function close(){
  isMongokuanLayerRef.value = false
}
// 打卡蒙层
function Jump(path){
  if(path === -1){
    router.go(path)
    return
  }
  isMongokuanLayerRef.value = true
  obtainWhoRef.value = path
  PersonalRecordsDataRef.value = PersonalRecordsData.filter(item => item.id === path).map(item => item.text)
}

</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.record-container{
  width: 100%;
  height: 100%;
  .main{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .box-container {
      width: 150px;
      height: 200px;
    }
    .icon {
      width: 100px;
      height: 100px;
      line-height: 100px;
      border-radius: 50%;
      margin: 20px auto;
      text-shadow: 2px 2px 10px #3b3b3b;
      background: linear-gradient(0deg, @frameColor1, @frameColor2);
      
    }
    .text{
      font-size: 20px;
        font-weight: bold;
    }
  }
}
.icon-container {
  color: #fff;
  font-size: 50px;
}
.Records-container{
  width: 80%;
}
</style>